<template>
	<view style="padding:15px 20rpx">
		<uni-row :width="nvueWidth" :gutter="20">
			<uni-col :span="12" v-for="(item,index) in list" :key="index">
				<view id="demo1" class="expert-list" @click="goTo(`../expertDetails/expertDetails?id=${item.id}`)">
					<text v-if="item.levelName" class="label" :class="{level:true}">{{item.levelName}}</text>	
					<view v-if="item.image">
						<image class="avatar" :src="imgUrl + item.image"
							mode="widthFix"></image>
					</view>
					<view v-else>
						<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/avatar.png" mode="widthFix">
						</image>
					</view>
					<text class="name" v-if="item.name">{{item.name}}</text>
					<text class="sort" v-if="item.fieldName">{{item.fieldName}}</text>
					<text class="info" v-if="item.description">{{item.description}}</text>
				</view>
				<!-- <view id="demo2" class="expert-list"
					@click="goTo('../expertDetails/expertDetails')">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert2.png"
						mode="widthFix"></image>
					<text class="name">巩华</text>
					<text class="sort">水产养殖</text>
					<text class="info">男，今年42岁，从业经验23年。擅长于草鱼、鲫鱼、鲤鱼等淡水鱼养殖技术</text>
				</view> -->

			</uni-col>
			<!-- <uni-col :span="12">
				<view id="demo3" class="expert-list"
					@click="goTo('../expertDetails/expertDetails')">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert3.png"
						mode="widthFix"></image>
					<text class="name">罗良平</text>
					<text class="sort">水产养殖</text>
					<text class="info">男，今年55岁，从业经验30年。毕业于...</text>
				</view>
				<view id="demo4" class="expert-list" @click="goTo('../expertDetails/expertDetails')">
					<text class="label" :class="{level:true}">高级</text>
					<image class="avatar" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/expert4.png"
						mode="widthFix"></image>
					<text class="name">鲍汉中</text>
					<text class="sort">虾、蟹养殖</text>
					<text class="info">男，今年53岁，1987年淡水养殖专业毕业，一致从事水...</text>
				</view>
			</uni-col> -->
			<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
		</uni-row>

	</view>
</template>

<script>
	import {
		baseurl,
		appPageKnowledgeExpertList
	} from "@/api/user.js"
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				nvueWidth: 730,
				list: [],
				page: 1,
				maxpage: 0,
				showLoadMore: false,
				imgUrl,
			}
		},
		onLoad() {
			this.initData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.appPageKnowledgeExpertList({ //参数
				"condition": null,
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		methods: {
			async appPageKnowledgeExpertList(options) {
				const res = await appPageKnowledgeExpertList(options)
				console.log(res);
				this.maxpage = res.returnObj.navigateLastPage;
				this.list = this.list.concat(res.returnObj.list);
				this.showLoadMore = false;
			},
			initData() {
				this.page = 1;
				this.list = [];
				this.showLoadMore = true;
				this.appPageKnowledgeExpertList({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	.expert-list {
		background-color: #ffffff !important;
		margin: 0 0 15px;
	}
</style>